<template>
  <div>
    <div :class="isDesktop ? 'px-ctn' : 'px-4 pb-2'">
      <Breadcrumb :breadcrumbs="breadcrumbs"></Breadcrumb>
    </div>
    <div v-if="isDesktop && loading" class="loading gap-row-16">
      <div class="left w-75"></div>
      <div class="d-flex w-33 flex-column gap-col-16">
        <div class="right"></div>
        <div class="right"></div>
      </div>
    </div>
    <div v-if="loading">
      <div class="loading" :class="isDesktop ? 'flex-row gap-row-16 pt-10' : 'flex-column gap-col-16'">
        <div class="center" v-for="n in 3" :key="n" :class="isDesktop ? 'w-33' : 'w-100'"></div>
      </div>
    </div>
  </div>
  <div class="d-flex flex-column" :class="isDesktop ? 'px-ctn pt-4 gap-col-24' : 'px-4 gap-col-4'">
    <div
      class="d-flex h-100 font-size-16 font-weight-500 line-height-140"
      :class="isDesktop ? 'flex-row gap-row-4' : 'flex-column gap-col-8'"
    >
      <div v-show="items[0]" class="h-100" :class="isDesktop ? 'v-col-8 px-0' : 'w-100'">
        <Link :href="`/blog/${items[0]?.url_address}`" @click="navigator(items[0]?.url_address)">
          <div :class="[isDesktop ? 'img-left mb-4' : 'img-mobile mb-2']">
            <img
              :src="items[0]?.cover_img"
              :alt="items[0]?.title"
              @error="handleImageError(0)"
              :class="{ err: items[0]?.cover_img === ErrorNodataImage }"
            />
          </div>
          <div>{{ items[0]?.title }}</div>
        </Link>
      </div>
      <div class="d-flex flex-column gap-col-16 h-100" :class="isDesktop ? 'v-col-4' : 'w-100'">
        <div v-show="items[1]" class="h-50 w-100">
          <Link :href="`/blog/${items[1]?.url_address}`" @click="navigator(items[1]?.url_address)">
            <div :class="[isDesktop ? 'img-right' : 'img-mobile mb-2']">
              <img
                :src="items[1]?.cover_img"
                :alt="items[1]?.title"
                @error="handleImageError(1)"
                :class="{ err: items[1]?.cover_img === ErrorNodataImage }"
              />
            </div>
            <div>{{ items[1]?.title }}</div>
          </Link>
        </div>
        <div v-show="items[2]" class="h-50 w-100">
          <Link :href="`/blog/${items[2]?.url_address}`" @click="navigator(items[2]?.url_address)">
            <div :class="[isDesktop ? 'img-right' : 'img-mobile mb-2']">
              <img
                :src="items[2]?.cover_img"
                :alt="items[2]?.title"
                @error="handleImageError(2)"
                :class="{ err: items[2]?.cover_img === ErrorNodataImage }"
              />
            </div>
            <div>{{ items[2]?.title }}</div>
          </Link>
        </div>
      </div>
    </div>
    <div v-if="items.length > 3" class="h-100 d-flex flex-column">
      <p class="font-size-20 font-weight-500 line-height-140" :class="isDesktop ? 'mx-1 mb-1' : 'mb-2 mt-4'">
        {{ $t('blog.recent') }}
      </p>
      <div
        class="d-flex w-100 font-size-16 font-weight-500 line-height-140 flex-wrap w-100"
        :class="isDesktop ? 'flex-row' : 'flex-column gap-col-8'"
      >
        <div v-for="(item, index) in items.slice(3)" :key="index" :class="isDesktop ? 'v-col-4 pr-4 pl-0' : 'w-100'">
          <Link :href="`/blog/${item.url_address}`" @click="navigator(item.url_address)">
            <div :class="isDesktop ? 'img-normal' : 'img-mobile mb-2'">
              <img
                :src="item.cover_img"
                :alt="item.title"
                @error="handleImageError(index + 3)"
                :class="{ err: items[index + 3]?.cover_img === ErrorNodataImage }"
              />
            </div>
            <div>{{ item.title }}</div>
          </Link>
        </div>
      </div>
    </div>
  </div>
  <div v-if="!loading && items.length === 0" class="d-flex justify-center align-center h-100 py-15">
    <ErrorNodata></ErrorNodata>
  </div>
  <div v-else>
    <v-container v-intersect="nextPage" class="text-center py-15">
      <div v-if="loading" class="loading font-size-14 font-weight-400 line-height-140 text-center">
        {{ $t('common.loading') }}
      </div>
      <div v-if="noMore" class="no-more font-size-14 font-weight-400 line-height-140 text-center">
        {{ $t('common.noMore') }}
      </div>
    </v-container>
  </div>
  <Jsonld :schema="schema"></Jsonld>
</template>
<script setup>
import { ref, shallowRef } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import { $t } from '@/i18n'
import Breadcrumb from '@/components/common/Breadcrumb.vue'
import ErrorNodata from '@/components/common/ErrorNodata.vue'
import Jsonld from '@/components/common/Jsonld.vue'
import Link from '@/components/common/Link.vue'
import { useInfinite } from '@/compositions/request/infinite'
import API from '@/http'

const ErrorNodataImage = '/images/fail-placeholder.png'

const { isDesktop } = storeToRefs(useAppStore())
const router = useRouter()

const breadcrumbs = ref([
  { label: $t('meta.keywords.title'), to: '/' },
  { label: $t('title.blog'), to: '/blog' },
])

const { dataList: items, loading, noMore, init, nextPage } = useInfinite({ request: API.Blog.list })
init()

function navigator(id) {
  router.push({ name: 'blog', params: { id } })
}

function handleImageError(index) {
  items.value[index].cover_img = ErrorNodataImage
}

// Jsonld 佈置
const schema = shallowRef({
  '@context': 'https://schema.org',
  '@type': 'WebSite',
  name: 'Fantasi Blog',
  url: 'https://www.fantasi.one/blog',
})
</script>
<style lang="scss" scoped>
@import '@/assets/styles/loading-skeleton.scss';
.px- {
  &ctn {
    padding: 0 8.3334%;
  }
}
img {
  max-width: 100%;
  width: 100%;
  height: inherit;
  border-radius: 0.625rem;
  -webkit-user-drag: none;
  object-fit: cover;
  &.err {
    background: linear-gradient(
      180deg,
      rgb(var(--v-theme-primary-gradient-from), 0.25) 0%,
      rgb(var(--v-theme-primary-gradient-to), 0.25) 100%
    );
    object-fit: none;
  }
}

.img- {
  &left {
    height: 30.5rem;
  }
  &right {
    height: 13.125rem;
  }
  &normal {
    height: 14.625rem;
  }
  &mobile {
    height: 12.875rem;
  }
}
.loading {
  display: flex;
  justify-content: center;
  padding: 0 8.3334%;
  width: 100%;
  padding-top: 1rem;
  .left {
    height: 30rem;
    border-radius: 0.625rem;
    @include loading-skeleton;
  }
  .right {
    height: 100%;
    border-radius: 0.625rem;
    @include loading-skeleton;
  }
  .center {
    height: 15rem;
    border-radius: 0.625rem;
    @include loading-skeleton;
  }
}
</style>
